<template>
  <div class="pe-page">
    <el-row>
      <el-col :span="24">
        <p class="block-title">*页面标题：</p>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入页面标题"
          v-model="item.title">
        </el-input>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <p class="block-title">页面高度(px)：</p>
        <div class="block">
          <el-input
            type="textarea"
            autosize
            placeholder="页面高度"
            v-model="item.style.height">
          </el-input>
        </div>
      </el-col>
    </el-row>

    
    <el-row>
      <el-col :span="24">
        <p class="block-title">页面背景颜色：</p>
        <div class="block">
          <el-color-picker v-model="item.style.backgroundColor" show-alpha></el-color-picker>
        </div>
      </el-col>
    </el-row>

    <div class="prop">
      <span class="inline-title">边框颜色：</span>
      <el-color-picker v-model="item.style.borderColor" show-alpha></el-color-picker>
    </div>
    <div class="prop">
      <p class="block-title">边框宽度(px)：</p>
      <div class="block">
        <el-slider v-model="item.style.borderWidth" show-input :max='10'>
        </el-slider>
      </div>
    </div>
    <div class="prop">
      <span class="inline-title">边框类型：</span>
      <el-select v-model="item.style.borderStyle" placeholder="请选择边框类型">
        <el-option label="无边框" value="none"></el-option>
        <el-option label="点状" value="dotted"></el-option>
        <el-option label="虚线" value="dashed"></el-option>
        <el-option label="实线" value="solid"></el-option>
        <el-option label="双线" value="double"></el-option>
      </el-select>
    </div>
    <div class="prop">
      <p class="block-title">边框圆角(px)：</p>
      <div class="block">
        <el-slider v-model="item.style.borderRadius" show-input :max="200">
        </el-slider>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.pe-page {
  font-size: 15px;
  text-align: left;
  padding: 10px;
}
</style>

<script>
import Mixin from '@/components/public/Mixin'
export default {
  props: [ 'item' ],
  mixins: [ Mixin ]
}
</script>
